<template>
  <div style="height: 100vh; overflow: hidden; position: relative">
    <div
      style="width: 400px; height: auto; background-color: white; border-radius: 10px; margin: 150px auto; padding: 30px"
    >
      <div
        style="margin: 30px; text-align: center; font-size: 30px; font-weight: bold; color: #42b983"
      >
        注 册
      </div>
      <el-form :model="admin" ref="registerForm" :rules="rules">
        <el-form-item prop="username">
          <el-input
            placeholder="请输入账号名"
            prefix-icon="el-icon-user"
            size="medium"
            v-model="admin.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            show-password
            prefix-icon="el-icon-lock"
            size="medium"
            v-model="admin.password"
          ></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input
            placeholder="请确认密码"
            show-password
            prefix-icon="el-icon-lock"
            size="medium"
            v-model="admin.repassword"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="width: 100%"
            size="medium"
            type="primary"
            @click="register"
            >确 认</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";
import request from "@/utils/request";



export default {
  name: "Register",
  setup() {
    const router = useRouter();
    const admin = reactive({
      username: "",
      password: "",
      repassword: "",
    });

    const registerForm = ref(null);

    const rules = {
      username: [
        { required: true, message: "请输入用户名", trigger: "blur" },
      ],
      password: [
        { required: true, message: "请输入密码", trigger: "blur" },
      ],
      repassword: [
        { required: true, message: "请确认密码", trigger: "blur" },
      ],
    };

    const register = () => {
      registerForm.value.validate((valid) => {
        if (valid) {
          if (admin.password === admin.repassword) {
            request
              .post("/user/register", admin)
              .then((res) => {
                if (res.code === "200") {
                  ElNotification.success("注册成功");
                  router.push("/login");
                } else {
                  ElNotification.error(res.msg);
                }
              })
              .catch(() => {
                ElNotification.error("请求失败，请稍后再试！");
              });
          } else {
            ElNotification.error("两次密码不一致");
          }
        }
      });
    };

    return { admin, rules, register, registerForm };
  },
};
</script>

<style scoped>
.cover {
  width: fit-content;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}
</style>
